@charset'utf-8';
@import'color';
@import'model.scss';
$themeColor:$cyan;
* {
    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif!important;
}
.videobox {
    width: 60%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    background-color: $black;
    video, embed {
        width: 100%;
        height: 100%;
    }
}
.chatbox {
    position: relative;
    width: 40%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    padding-top: 50px;
    padding: 50px 0 145px 0;
    background-color: #efefef;
    .title {
        width: 100%;
        height: 35px;
        @include Line(1);
        font-size: 20px;
        font-weight: lighter;
        position: absolute;
        background-color: $white;
        top: 0;
        box-sizing: border-box;
        padding: 0 15px;
        left: 0;
    }
    .replybox {
        position: absolute;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 15px;
        height: 130px;
        background-color: $white;
        textarea {
            width: 100%;
            height: 60px;
            line-height: 20px;
            margin-bottom: 10px;
            resize: none;
            border: 1px solid #ddd;
        }
        .tool {
            height: 30px;
            text-align: right;
            button {
                height: 30px;
                min-width: 40px;
                padding: 0 15px;
                text-align: center;
                line-height: 30px;
                background-color: $themeColor;
                border: 0;
                margin-left: 15px;
                color: $white;
                cursor: pointer;
            }
            .icon-baocun {
                display: inline-block;
                line-height: 30px;
                font-size: 18px;
                cursor: pointer;
                @include comic(.5);
                &:hover {
                    color: $orange;
                }
            }
        }
    }
    .box {
        width: 100%;
        height: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        overflow-y: scroll;
        &::-webkit-scrollbar {
            width: 8px;
        }
        &::-webkit-scrollbar-track {
            // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            -webkit-border-radius: 2px;
            border-radius: 3px;
            border-left: 1px solid #e2e2e2;
        }
        &::-webkit-scrollbar-thumb {
            -webkit-border-radius: 10px;
            border-radius: 10px;
            background: rgba(200, 200, 200, 0.8);
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
        }
        &::-webkit-scrollbar-thumb:window-inactive {
            background: rgba(200, 200, 200, 0.4);
        }
        .msgitem {
            width: 100%;
            margin-bottom: 10px;
            &.focus {
                text-align: right;
                .msg {
                    background-color: $themeColor;
                    color: $white;
                }
            }
            .msg {
                color: $black;
                background-color: $white;
                display: inline-block;
                vertical-align: top;
                padding: 10px;
                text-align: left;
                line-height: 20px;
                min-width: 40%;
                max-width: 80%;
                overflow: hidden;
                img {
                    max-width: 100%;
                    height: auto;
                    margin-bottom: 5px;
                }
            }
        }
    }
}
